<!-- 导航栏上的按钮 -->
<template>
	<view class="navi-right-content" :style="{ opacity: buttonOpacity }">
		<view class="button-navi-right-border" @click="onClick">
			<text class="button-navi-right-text">{{currentButton.name}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				buttonOpacity: "1",
				colorInterval: {},
				currentButton: {}
			}
		},
		methods: {
			/* 点击事件 */
			onClick() {
				this.$emit("onClick" , this.currentButton)
			},
			/* 按钮渐隐动效 */
			rightButtonAnimate() {
				let _this = this;
				clearInterval(this.colorInterval)
				this.colorInterval = setInterval(() => {
					_this.buttonOpacity = "0";
					setTimeout(() => {
						_this.buttonOpacity = "1";
					} , Number(this.animateTime))
				} , Number(this.time))
			},
			/* 按钮轮播显示 */
			setButtonRotation() {
				let startIndex = 0;
				let _this = this;
				this.currentButton = this.buttonList[0]
				this.colorInterval = setInterval(() => {
					if(startIndex >= this.buttonList.length - 1)
						startIndex = 0;
					else
						startIndex ++;
					this.currentButton = this.buttonList[startIndex]
					_this.buttonOpacity = "0";
					setTimeout(() => {
						_this.buttonOpacity = "1";
					} , Number(this.animateTime))
				} , Number(this.time))
			},
			setButton() {
				if(this.isRotation) {
					this.setButtonRotation();
				}else{
					this.currentButton.name = this.text
					this.rightButtonAnimate()
				}
			}
		},
		mounted() {
			//this.setButton();
		},
		watch: {
			text: {
				handler() {
					this.setButton();
				},
				immediate: true
			}
		},
		props: {
			text: {	//按钮文字
				type: String,
				default: ""
			},
			time: {	//轮播间隔时间
				type: [String , Number],
				default: 4000
			},
			animateTime: {	//动画速度
				type: [String , Number],
				default: 600
			},
			isRotation: {	//按钮是否轮播
				type: Boolean,
				default: false
			},
			buttonList: {	//轮播按钮队列，只在isRotation为true时生效
				type: Array,
				default: () => {
					return []
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.colorInterval)
		},
	}
</script>

<style lang="less" scoped>
	.navi-right-content{
		margin-left: 16rpx;
		padding: 6rpx 0;
		flex-direction: row;
		align-items: center;
		transition: opacity 1s;
		.button-navi-right-border{
			padding: 6rpx 16rpx;
			border: solid 1px #ffffff;
			border-radius: 7rpx;
			.button-navi-right-text{
				font-size: 28rpx;
				color: #ffffff;
				border-bottom: solid 1px #ffffff;
			}
		}
	}
</style>
